<template>
    <div class="common-layout" style="background-color:honeydew">

        <el-container>
            <div class="header">
                <el-header>
                <span class="icon">
                <el-icon :size="35">
                    <shop/>
                </el-icon>
            </span>
                    <span class="title">汪汪羊</span>
                </el-header>
            </div>
            <div class="main">
                <el-main >
                    <div class="left">
                        <el-image :src="`http://127.0.0.1:8081/product/${product.picture}`" style="height: 430px;width: 430px "></el-image>
                    </div>
                    <div class="right">
                        <div class="text">
                            <el-text  truncated><h1 style="color:#000;">{{product.title}}</h1></el-text>
                        </div>
                        <div class="text">
                            <el-text  truncated><h3 style="color: #888888">{{product.subtitle}}</h3></el-text>
                        </div>
                        <div class="text">
                            <el-text  truncated>{{product.description}}</el-text>
                        </div>
                        <div class="text">
                            <el-text  truncated>{{product.price}}</el-text>
                        </div>
                        <div style="margin-top: 50px">
                            <el-button @click="gm = true">购买</el-button>
                            <el-button @click="sc">收藏</el-button>
                            <el-button @click="gwc = true">加入购物车</el-button>
                        </div>
                    </div>
<!--                    加入订单对话框-->
                    <el-dialog v-model="gm" title="订单信息" width="50%" center>
                        <el-form :model="gmForm" label-width="60">
                            <el-form-item>
                                <el-image :src="`http://127.0.0.1:8081/product/${product.picture}`" style="margin-left: 150px;height: 200px;width: 200px"></el-image>
                            </el-form-item>
                            <el-form-item>
                                标题：<el-input v-model="gmForm.title" placeholder="title" style="width: 300px" readonly="readonly"/>
                            </el-form-item>
                            <el-form-item>
                                描述：<el-input v-model="gmForm.description" placeholder="description" style="width: 300px" readonly="readonly"/>
                            </el-form-item>
                            <el-form-item>
                                价  格：<el-input v-model="gmForm.price" placeholder="price" style="width: 300px" readonly="readonly"/>
                            </el-form-item>
                            <el-form-item>
<!--                                数量：<el-input v-model="gmForm.number" placeholder="title" style="width: 300px"/>-->
                                数量：<el-slider style="width:300px" v-model="sl" show-input @change="sum"/>
                            </el-form-item>
                            <el-form-item>
                                总  价：<el-input v-model="gmForm.total" style="width: 300px"/>
<!--                                <el-button @click="sum"></el-button>-->
                            </el-form-item>
                            <el-form-item>
                                地  址：<el-input v-model="gmForm.address" style="width: 300px"/>
                            </el-form-item>
                            <el-form-item>
                                收货人： <el-input v-model="gmForm.username" style="width: 300px"/>
                            </el-form-item>
                            <el-form-item>
                                手机号：<el-input v-model="gmForm.telephone" style="width: 300px"/>
                            </el-form-item>
                            <el-button @click="create" style="margin-left: 200px">购买</el-button>
                            <el-button @click="gm = false">取消</el-button>
                        </el-form>
                    </el-dialog>
                    <el-dialog v-model="gwc" title="加入购物车" width="50%" center>
                        <el-form :model="gwcForm" label-width="60">
                            <el-form-item>
                                <el-image :src="`http://127.0.0.1:8081/product/${product.picture}`"></el-image>
                            </el-form-item>

                            <el-form-item>
                                价  格：<el-input v-model="gwcForm.price" placeholder="price" style="width: 300px" readonly="readonly"/>
                            </el-form-item>
                            <el-form-item>
                                <!--                                数量：<el-input v-model="gmForm.number" placeholder="title" style="width: 300px"/>-->
                                数量：<el-slider v-model="sls" show-input @change="sum"/>
                            </el-form-item>
                            <el-form-item>
                                总  价：<el-input v-model="gwcForm.total" style="width: 300px"/>
                                <!--                                <el-button @click="sum"></el-button>-->
                            </el-form-item>
                                <el-button @click="cartC" style="margin-left: 200px">加入购物车</el-button>
                                <el-button @click="gwc = false">取消</el-button>
                        </el-form>
                    </el-dialog>
                </el-main>
                <div style="">
                    <el-form :model="commForm" label-width="80px">
                        <el-form-item >
                            <el-input style="height: 50px"  v-model="commForm.content" placeholder="发布评论"></el-input>
                            <br>
                            <el-button @click="createComm">发布评论</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div>
                    <el-col :span="100" v-for="comment in comments" :key="comment">
                        <el-card class="comment-card" :commid="comment.commid" style="margin-top: 10px;height: 180px" >
                            <div class="left" style="width: 2000px">
                                <el-row>
                                    <el-col :span="4" ><el-image style="height: 100px;width:100px" :src="`http://127.0.0.1:8081/avatar/${comment.user.avatar}`"/>
                                    <br>
                                        <el-text >{{comment.user.username}}</el-text>
                                        <br>
                                        <el-text>{{comment.time}}</el-text>
                                        <el-text style="margin-left: 10px">{{comment.ip}}</el-text>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-text>{{comment.content}}</el-text>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-button style="margin-top: 10px; margin-left: 100px" @click="removeById(comment.commid)">删除
                                        </el-button>
                                    </el-col>
                                </el-row>
                                <div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </div>
            </div>
            <el-footer>
                <el-footer>&copy;2023 by 汪汪羊<sup>&reg;</sup></el-footer>
            </el-footer>
        </el-container>
    </div>
</template>

<script setup>

import {onMounted, ref,reactive,toRaw} from 'vue'
import {ElMessage} from "element-plus";
import productApi from "../../api/product.js";
import {useRoute} from "vue-router";
import orderApi from "../../api/order.js"
import collectApi from "../../api/collect.js"
import cartApi from '../../api/cart.js'
import commentApi from '../../api/comment.js'
import axios from 'axios'
onMounted(() => {
    queryById()
    queryByPid()
})

let product = reactive({
    pid:'',
    title:'',
    subtitle:'',
    picture:'',
    price:'',
    description:''
})

const route = useRoute();
let pid = route.query.pid
let uid = route.query.uid
const sl = ref(0)
const sls = ref(0)
const queryById = async() =>{
    const res = await productApi.queryById({pid:pid})
    console.log(res.data)
    product.pid = res.data.pid
    product.picture = res.data.picture
    product.subtitle = res.data.subtitle
    product.description =res.data.description
    product.price = res.data.price


    gmForm.title = res.data.title
    gmForm.description = res.data.description
    gmForm.price = res.data.price

    scForm.title = res.data.title

    gwcForm.title = res.data.title
    gwcForm.file = res.data.file
    gwcForm.picture = res.data.picture
    gwcForm.price = res.data.price
}
const gm = ref(false)
const gmForm = reactive({
    uid:uid,
    pid:pid,
    price:'',
    number:'',
    total: '',
    address:'',
    username:'',
    telephone:''
})
const sum =async () =>{
    gmForm.number = sl.value
    gmForm.total = gmForm.price * gmForm.number

    gwcForm.number = sls.value
    gwcForm.total = gwcForm.price * gwcForm.number
}
const create =async() =>{
    gm.value = false
    const res = await orderApi.create(gmForm)
    if (res.data) {
        ElMessage.success('添加成功');
    } else {
        ElMessage.error('添加失败');
    }
}
const scForm = reactive(
    {
        uid:uid,
        pid:pid
    }
)
const sc = async() =>{
    const res = await collectApi.create(scForm)
    if (res.data) {
        ElMessage.success('收藏成功');
    } else {
        ElMessage.error('收藏失败');
    }
}

const gwc = ref(false)
const gwcForm = reactive({
    uid:uid,
    pid:pid,
    title:'',
    price:'',
    number:'',
    total:''
})
const cartC = async() =>{
    gwc.value = false
    const res = await cartApi.create(gwcForm)
    if (res.data) {
        ElMessage.success('加入成功');
    } else {
        ElMessage.error('加入失败');
    }
}
const commForm = reactive({
    uid:uid,
    pid:pid,
    content:''
})

const comments = ref([])

const queryByPid = async() =>{
    const res = await commentApi.queryByPid({pid:pid})
    comments.value = res.data
    console.log(res.data)
    console.log(comments.value)
}
const createComm = async() =>{
    const res = await commentApi.create(commForm)
    if(res.data){
        alert("success")
        queryByPid()
    }else {
        alert("出错")
    }
}
const removeById =(commid) =>{
    axios.delete('http://127.0.0.1:8080/comment/removeById', {data: {commid: commid}}).then(res => {
        if (res.data) {
            ElMessage.success("删除成功")
            queryByPid();
        } else {
            ElMessage.error("删除失败")
        }
    })
}

</script>


<style scoped>
.common-layout {
    width: 100%;
    margin: auto;
    height: auto;
}
.common-layout{
    cursor: pointer;
}

.header {
    height: 60px;
    background: rgba(33, 33, 33, .8);
    color: #f9f9f9;
    width: 100%;
}

.main{
    width: 80%;
    margin-left: 135px;
    padding-top: 10px;

}

.el-container {
    -ebkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.el-icon {
    color: orangered;
}

.icon {
    display: inline-block;
    vertical-align: middle; /*垂直方向居中对齐*/
}

.title {
    margin-left: 10px;
    font-size: 25px;
    font-weight: bolder;
    line-height: 60px; /* 行高 行高等于父级容器的高度 将在父级容器中垂直居中 */
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
    text-align: center;
}

.el-dropdown-link
{
    float: right;
    padding-top: 22px;
    padding-right: 20px;
    color: white;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.el-footer {
    color: #f9f9f9;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: rgba(33, 33, 33, .8);
}

.title
{
    padding: 8px 10px;
    font-weight: bold;
}

hr {
    width: 160px;
    height: 1px;
    margin: 8px auto;
    color: #ffffee;
    border: 0;
    border-top: 1px #ddd solid;
}
.left,
.right {
    float: left;
    height: 530px;
}

.left {
    width: 430px;
    margin-right: 40px;
}

.right {
    width: 320px;
    margin-left: 120px;
}
.text{
    margin-top: 40px;
    
}
</style>
